<template>
  <div>
    <el-row type="flex" justify="space-between" class="product-quality-management-title">
      <div>
        <div class="font-16 font-w-600">
          {{ $t('product.setting.productQualitySetTitle') }}
          <i @click="handleClickIcon" class="iconfont icon-warning-circle-fill el-tooltip" style="cursor: pointer"></i>
        </div>
        <div class="product-quality-management-title-tips">{{ $t('product.setting.productQualitySetDes') }}</div>
      </div>
      <div>
        <el-switch v-model="qualitySwitch" @change="changeSwitch($event, 'qualitySwitch')"></el-switch>
        {{ qualitySwitch ? $t('common.base.enable') : $t('common.base.disable') }}
        <el-popover v-model="isPopover" placement="bottom" width="206" trigger="click" popper-class="popperclass">
          <div>
            <i style="color: #faad14; margin-right: 9px" class="el-icon-warning iconWarning el-tooltip"></i>
            {{ $t('product.setting.productQualityGuide') }}
          </div>
          <div class="mt_12">
            <el-button @click="handleClickIcon" type="primary">{{ $t('common.base.clickForMoreInformation') }}</el-button>
          </div>
        </el-popover>
      </div>
    </el-row>

    <GuidanceDialog v-if="currGuideType" :title="guideSetting[currGuideType].title" :steps="guideSetting[currGuideType].steps" :moreUrl="guideSetting[currGuideType].moreUrl" ref="GuidanceDialog" />
  </div>
</template>
<script>
import GuidanceDialog from '@src/modules/setting/productV2/productSet/components/GuidanceDialog.vue';

import { getRootWindowInitData } from '@src/util/window';
import i18n from '@src/locales';
import QualityMixin from '@src/mixins/qualityMixin/index.tsx';

import { qualitySave } from '@src/api/ProductV2Api';

export default {
  name: 'product-quality-management-title',
  mixins: [QualityMixin],
  data() {
    return {
      qualitySwitch: true,
      currGuideType: '',
      isPopover: true,
    };
  },
  computed: {
    tenantType() {
      return getRootWindowInitData()?.tenantType;
    },
    guideMoreUrl() {
      return this.tenantType == 2 ? 'https://docs.qq.com/doc/p/ff09ae8df6a4462b93b1ef216d8f530bdbe632c4?dver=2.1.27237808' : this.tenantType == 4 ? 'https://publink-hz.feishu.cn/wiki/wikcnlfgvwd8cb5uy9KrIum0aXb' : 'https://doc.shb.ltd/shb_xoqazk/ia4qctp2ly559d1m/wtr4x2a43al72qae/ge6p2uecxuvng1c2.html';
    },
    guideSetting() {
      return {
        quality: {
          title: i18n.t('product.setting.guideSetting.title'),
          moreUrl: this.guideMoreUrl,
          steps: [
            {
              type: 'image',
              url: 'https://she-dev.oss-cn-hangzhou.aliyuncs.com/acs/newfiles/7416b42a-25cc-11e7-a500-00163e12f748/202109/0999c9f9-9a14-4969-96a3-eb91d8b1ed49.jpg',
              text: i18n.t('product.setting.guideSetting.des1'),
            },
            {
              type: 'video',
              url: 'https://she-dev.oss-cn-hangzhou.aliyuncs.com/acs/newfiles/7416b42a-25cc-11e7-a500-00163e12f748/202109/edc2e02f-c218-48f7-9020-e8d35252c7f1.mp4',
              text: i18n.t('product.setting.guideSetting.des2'),
            },
            {
              type: 'video',
              url: 'https://she-dev.oss-cn-hangzhou.aliyuncs.com/acs/newfiles/7416b42a-25cc-11e7-a500-00163e12f748/202109/e91dd8c8-3442-48d8-bb1c-c61a2e483464.mp4',
              text: i18n.t('product.setting.guideSetting.des3'),
            },
            {
              type: 'video',
              url: 'https://she-dev.oss-cn-hangzhou.aliyuncs.com/acs/newfiles/7416b42a-25cc-11e7-a500-00163e12f748/202109/24ba407d-cb4a-4d4f-9725-5b434742cb99.mp4',
              text: i18n.t('product.setting.guideSetting.des4'),
            },
            {
              type: 'video',
              url: 'https://she-dev.oss-cn-hangzhou.aliyuncs.com/acs/newfiles/7416b42a-25cc-11e7-a500-00163e12f748/202109/e8b35503-d78b-4c3e-807f-0d90989f90fd.mp4',
              text: i18n.t('product.setting.guideSetting.des5'),
            },
          ],
        },
      };
    },
  },
  watch: {
    isOpenQuality: {
      handler(newValue) {
        this.qualitySwitch = newValue;
      },
      immediate: true,
    },
  },
  created() {
    if (localStorage.getItem('isGuidance')) {
      this.isPopover = false;
    }
  },
  methods: {
    openGuidanceDialog(type) {
      this.currGuideType = type;
      this.$nextTick(() => {
        this.$refs.GuidanceDialog.visible = true;
      });
    },
    handleClickIcon() {
      this.openGuidanceDialog('quality');
      localStorage.setItem('isGuidance', 1);
      this.isPopover = false;
    },
    async changeSwitch(state, configCode) {
      const params = {
        state,
        configCode,
      };
      let res = await qualitySave(params);
      if (res.errorCode !== 0) {
        this.$platform.alert(res.message);
      }
    },
  },
  components: {
    GuidanceDialog,
  },
};
</script>
<style lang="scss" scoped>
.product-quality-management-title {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  &-tips {
    color: #8c8c8c;
    font-size: 12px;
    margin-top: 4px;
  }
  ::v-deep .popperclass {
    right: 0px;
    top: 38px;
    text-align: center;
  }
}
</style>
